<?php
session_start();
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/easydialog.css">
    <script src="js/jquery.1.11.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/easydialog.min.js"></script>
    <title>我最爱的车辆在线投票</title>
    <style>
        .row img {
            width: 100%;
        }
        .login{text-align: right;margin-bottom: 20px}
        #main{display: none;background-color: white;padding: 20px}
    </style>
</head>
<body>
<div class="container">
    <h1 class="text-center">我最爱的车辆投票</h1>
    <p class="login">
        <?php
        if(isset($_SESSION['logged']) and $_SESSION['logged'] !=""){
            echo "当前用户：".$_SESSION['logged']." &nbsp;&nbsp;";
            if($_SESSION['admin']){ //说明是管理员
                echo '<a href="admin.php?navID=1">后台管理</a> &nbsp;&nbsp;';
            }
            echo '<a href="logout.php">注销</a>';
        }
        else{
            echo '<a href="login.php">登录</a> <a href="singup.php">注册</a>';
        }?>
    </p>
    <?php
    include_once "conn.php";
    $sql = "select a.id,a.title carname,a.carnum,b.content description,a.thumb carpic 
            from v9_news a,v9_news_data b where a.id = b.id and a.catid = 9 order by id desc";
    $result = mysqli_query($conn,$sql);
    ?>
    <div class="row">
        <?php
        $i = 1;
        while($info = mysqli_fetch_array($result)) {
            ?>
            <div class="col-xs-6  col-md-4">
                <a href="javascript:showCode(<?php echo $info['id']?>);">
                    <img src="<?php echo $info['carpic']?>">
                </a>
                <div class="row">
                    <div class="col-xs-6">
                        <p class="text-center">车辆名称：<?php echo $info['carname']?></p>
                    </div>
                    <div class="col-xs-6">
                        <p>当前票数：<span id="car<?php echo $info['id']?>"><?php echo $info['carnum']?></span></p>
                    </div>
                    <p><?php echo $info['description']?></p>
                </div>
            </div>
            <?php
            if($i % 2 == 0) {
                ?>
                <div class="clearfix visible-xs-block visible-sm-block"></div>
                <?php
            }
            if($i % 3 == 0) {
                ?>
                <div class="clearfix visible-md-block visible-lg-block"></div>
                <?php
            }
            $i++;
        }
        ?>
    </div>
</div>
<div id="main">
    <h1>请输入验证码</h1>

        <table style="border-collapse:collapse " border="1" cellpadding="10" bordercolor="gray" cellspacing="0">
            <tr>
                <td align="center">验证码</td>
                <td align="left">
                    <input name="code" id="userCode">
                    <img src="code.php" id="code" title="点击刷新" alt="点击刷新">
                </td>
            </tr>
            <tr>
                <td align="center">
                    <input type="button" id="go" value="提交">
                    <input type="hidden" name="carID" id="carID" value="">
                </td>
                <td align="left"><input type="button" value="关闭" id="close" ></td>
            </tr>
        </table>
</div>
<script>
    $(function () {
        $("#go").click(function () {
            //通过ajax请求，完成投票操作
            $.ajax({
                url:"ajaxVote.php",
                data:{
                    code:$("#userCode").val(),
                    carID:$("#carID").val()
                },
                type:"POST",
                dataType:"JSON",
                success:function (data) {
                    if(data.error == 1){
                        alert(data.errMsg);
                        //更新验证码

                    }
                    else{
                        var currentNum = $("#car" + $("#carID").val()).text();
                        //console.log(currentNum);
                        currentNum ++;
                        $("#car" + $("#carID").val()).text(currentNum);
                        close();
                        alert(data.msg);
                    }
                },
                error:function () {
                    alert("网络错误");
                }
            })
        })
    })
    function showCode(id) {
        //先写入参数
        $("#carID").val(id);
        //再弹验证码
        easyDialog.open({
            container : 'main',
            fixed : false
        });
    }
    function close() {
        //console.log('close');
        $("#userCode").val('')
        easyDialog.close();
    }
    $(function () {
        $("#close").click(function () {
            close();
        })
    })
</script>
</body>
</html>